@extends('layouts.admin.header')
@section('css')
    <link rel="stylesheet" type="text/css" href="/css/formSelects-v4.css" />
@endsection
@section('cnt')
    <div class="layui-fluid">
        <div class="layui-row">

            <form class="layui-form">
                @csrf
                <div class="layui-form-item">
                    <label class="layui-form-label">商品分类</label>
                    <div class="layui-input-block" style="width: 190px;">
                        <select name="class_id" lay-verify="required" lay-filter="menutree-dropdown">
                            @foreach($classesData as $k=>$v)
                                <option value="{{$v['id']}}">{{$v['name']}}</option>
                            @endforeach
                        </select>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        商品名称
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="url" name="goods_name" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        请输入 商品名称
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        副标题
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="url" name="goods_subname" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        商品编号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="url" name="goods_no" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        商品品牌
                    </label>
                    <div class="layui-input-block" style="width: 190px;">
                        <select name="brand_id" lay-verify="required" lay-filter="menutree-dropdown">
                            @foreach($brandData as $k=>$v)
                                <option value="{{$v['id']}}">{{$v['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">商品图片</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2" name="goods_images"></div>
                        <input type="hidden" name='goods_images'  id="imglist">
                    </blockquote>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        商品价格
                    </label>
                    <div class="layui-input-inline">
                        <input type="number" id="goods_price" name="goods_price" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        市场价格
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="url" name="goods_market_price" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        库存
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="url" name="goods_stock" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        运费物流
                    </label>
                    <div class="layui-input-inline">
                        <input type="number" id="url" name="freight_id" required=""
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 200px">
                    <label for="url" class="layui-form-label">
                        规格属性
                    </label>
                    <div class="layui-input-block" style="width: 190px;" >
                        <select name="goods_attr" xm-select="select1" onblur="ceshi()">
                            @foreach($attrData as $v)
                                <option value="{{$v->id}}">{{$v->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label for="url" class="layui-form-label">
                        详情
                    </label>
                    <div class="layui-input-inline">
                        <textarea name="goods_content" id="body"></textarea>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否上架</label>
                    <div class="layui-input-block">
                        <input type="radio" name="goods_status" value="0" title="否" checked>
                        <input type="radio" name="goods_status" value="1" title="是" >
                    </div>
                </div>


                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        增加
                    </button>
                </div>
            </form>

        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="/js/formSelects-v4.min.js" type="text/javascript"
            charset="utf-8"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <script>

        layui.use(['form', 'layer','upload'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;
                upload = layui.upload;
                //多图片上传
                upload.render({
                    elem: '#test2'
                    ,url: '{{route('admin.goods.goods_image_upload')}}' //改成您自己的上传接口
                    ,data:{_token:'{{csrf_token()}}'}
                    ,multiple: true
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                        });
                    }
                    ,done: function(res){
                        //上传完毕
                        if(res.status < 0){
                            return layer.msg('上传失败');
                        }
                        //上传成功
                        let val = $('#imglist').val();
                        let tmp = val + ',' +res.url;
                        $('#imglist').val(tmp);
                    }
                });
                <!-- 实例化编辑器 -->

                var ue = UE.getEditor('body',{
                    initialFrameWidth:400,  //设置高度

                    initialFrameHeight:200,  //设置高度

                });


                //监听提交
                form.on('submit(add)', function(data) {
                    let url='{{route('admin.goods.store')}}';
                    let formData = data.field;
                    $.post(url,formData).then(({status,msg})=>{
                        if(status==200){
                            //发异步，把数据提交给php
                            layer.alert("增加成功", {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }else{
                            layer.alert("增加失败", {
                                    icon: 5
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }
                    });
                    return false;
                });


            });
    </script>
@endsection
